import React, { useEffect, useState } from 'react'
import { Card, Row, Col, Tag, Pagination, Table, Button, Tree } from 'antd'
import type { ColumnsType } from 'antd/es/table'
import type { DataNode, TreeProps } from 'antd/es/tree'
import { useParams } from 'react-router-dom'
import { reqGetDeps, reqGetScheduleRules } from '@api/hospital/hospitalList'
import {
  IdepList,
  IScheduleRuleList,
} from '@api/hospital/hospitalList/model/hospitalListTypes'
// const treeData: DataNode[] = [
//   {
//     title: 'parent 1',
//     key: '0-0',
//     children: [
//       {
//         title: 'parent 1-0',
//         key: '0-0-0',
//         disabled: true, // 禁止当前树节点被选中
//         children: [
//           {
//             title: 'leaf',
//             key: '0-0-0-0',
//             disableCheckbox: true, //禁用当前节点的复选框
//           },
//           {
//             title: 'leaf',
//             key: '0-0-0-1',
//           },
//         ],
//       },
//       {
//         title: 'parent 1-1',
//         key: '0-0-1',
//         children: [
//           {
//             title: <span style={{ color: '#1890ff' }}>sss</span>,
//             key: '0-0-1-0',
//           },
//         ],
//       },
//     ],
//   },
// ]

let depcode: string
export default function HospitalSchedule() {
  const { hoscode } = useParams()
  // 科室数据的状态
  const [depList, setDepList] = useState<IdepList>([])
  const [depCodes, setDepCodes] = useState<string[]>([])

  // 排班规则数据
  const [scheduleRules, setScheduleRules] = useState<IScheduleRuleList>([])

  //分页相关的状态
  const [page, setPage] = useState(1)
  const [pageSize, setPageSize] = useState(5)
  const [total, setTotal] = useState(0)
  useEffect(() => {
    async function fetch() {
      const result = await reqGetDeps(hoscode as string)
      // 为了禁用一级科室,所以所有一级科室数据中添加disabled
      result.forEach((item) => {
        item.disabled = true
      })
      setDepList(result)
      // 将所有一级科室的depcode拿到,存储到状态里面
      setDepCodes(
        result.map((item) => {
          return item.depcode
        })
      )

      // 给全局的depcode赋值
      depcode = result[0].children[0].depcode
      // 获取排班规则
      getScheduleRules(page, pageSize, depcode)
    }
    fetch()
  }, [])

  // 获取排班规则的函数
  async function getScheduleRules(
    page: number,
    pageSize: number,
    depcode: string
  ) {
    // 获取排班规则
    const result = await reqGetScheduleRules(
      page,
      pageSize,
      hoscode as string,
      depcode
    )
    // console.log(result)
    setScheduleRules(result.bookingScheduleList)
    setTotal(result.total)
  }

  const onSelect: TreeProps['onSelect'] = (selectedKeys, info) => {
    console.log('selected', selectedKeys, info)
  }

  const onCheck: TreeProps['onCheck'] = (checkedKeys, info) => {
    console.log('onCheck', checkedKeys, info)
  }
  const columns: ColumnsType<{ name: string }> = [
    {
      title: '序号',
      render(a, b, index) {
        return index + 1
      },
      align: 'center',
    },
    {
      title: '职称',
    },
    {
      title: '号源时间',
    },
    {
      title: '可预约数',
    },
    {
      title: '剩余预约数',
    },
    {
      title: '挂号费(元)',
    },
    {
      title: '擅长技能',
    },
  ]

  // 动态计算树结构父盒子的高度
  // 逻辑: 页面可视区高度 - Header高度-Tabs高度-Card的上下内边距-面包屑的高度和p标签的外边距
  const height = document.documentElement.clientHeight - 64 - 44 - 48 - 36
  return (
    <Card>
      <p>选择：北京协和医院 / 多发性硬化专科门诊 / 2022-04-28</p>

      <Row gutter={20}>
        <Col span={5}>
          <div style={{ border: '1px solid #ccc', height, overflow: 'scroll' }}>
            <Tree
              //   checkable //树结构中是否使用复选框
              //   defaultExpandedKeys={['0-0-0', '0-0-1']} //默认展开的节点(注意: 第一次生效)
              //   defaultSelectedKeys={['0-0-0', '0-0-1']} //默认选中的节点
              //   defaultCheckedKeys={['0-0-0', '0-0-1']} //默认选中节点复选框
              onSelect={onSelect} //选中节点触发的事件
              //   onCheck={onCheck} // 点击节点的复选框触发的事件
              treeData={depList as any} //树形控件渲染的数据
              // Tree组件默认使用数据中title渲染文本,使用key作为节点的id. 配置了fieldsNames,可以自定义渲染文本的属性和作为id的属性
              fieldNames={{
                title: 'depname',
                key: 'depcode',
              }}
              // 要展示的节点的id(depcode)
              expandedKeys={depCodes}
            />
          </div>
        </Col>
        <Col span={19}>
          {scheduleRules.map((item) => {
            return (
              <Tag key={item.workDate}>
                {item.workDate} {item.dayOfWeek}
                <div>
                  {item.availableNumber} / {item.reservedNumber}
                </div>
              </Tag>
            )
          })}

          <Pagination
            current={page}
            pageSize={pageSize}
            total={total}
            showSizeChanger={true}
            pageSizeOptions={[2, 5, 10]}
            style={{ marginTop: 20, marginBottom: 20 }}
            onChange={(page, pageSize) => {
              setPage(page)
              setPageSize(pageSize)
              getScheduleRules(page, pageSize, depcode)
            }}
          />
          <Table
            columns={columns}
            dataSource={[{ name: 'zs' }, { name: 'ls' }]}
            bordered
            pagination={false} //table组件默认展示分页器,如不需要,则直接赋值为false
          ></Table>
          <Button style={{ marginTop: 20 }}>返回</Button>
        </Col>
      </Row>
    </Card>
  )
}
